<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>学员关系管理系统CRM</title>
    <!-- 引入css样式文件 -->
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="./css/metisMenu.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="./css/dataTables.bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="./css/sb-admin-2.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="./css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="./css/boot-crm.css" rel="stylesheet" type="text/css">
    <style>
        .panel-group {
            max-height: 770px;
            overflow: auto;
        }

        .leftMenu {
            margin: 10px;
            margin-top: 5px;
        }

        .panel-heading {
            background-color: #337ab7;
            border-color: #2e6da4;
            font-size: 14px;
            padding-left: 20px;
            color: white;
            position: relative;
            cursor: pointer;
        }

        /*转成手形图标*/
        .panel-heading span {
            position: absolute;
            right: 10px;
            top: 12px;
        }

        .menu-item-left {
            padding: 2px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 6px;
        }

        .menu-item-left:hover {
            background: #C4E3F3;
            border: 1px solid #1E90FF;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <nav id="leftBar" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="">学员关系管理系统（CRM） v2.0</a>
        </div>
        <!-- 导航栏右侧图标部分 -->
        <!-- 导航栏右侧图标部分 -->
        <ul class="nav navbar-top-links navbar-right">
            <!-- 邮件通知 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="department/list.action#">
                    <i class="fa fa-envelope fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-messages">
                    <li>
                        <a href="department/list.action#">
                            <div>
                                <strong>张经理</strong> <span class="pull-right text-muted">
								<em>昨天</em>
							</span>
                            </div>
                            <div>今天晚上开会，讨论一下下个月工作的事...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="department/list.action#">
                            <strong>查看全部消息</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 邮件通知 end -->
            <!-- 任务通知 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="department/list.action#">
                    <i class="fa fa-tasks fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-tasks">
                    <li>
                        <a href="department/list.action#">
                            <div>
                                <p>
                                    <strong>任务 1</strong>
                                    <span class="pull-right text-muted">完成40%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">完成40%</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="department/list.action#">
                            <div>
                                <p>
                                    <strong>任务 2</strong>
                                    <span class="pull-right text-muted">完成20%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        <span class="sr-only">完成20%</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="department/list.action#">
                            <strong>查看所有任务</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 任务通知 end -->
            <!-- 消息通知 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="department/list.action#">
                    <i class="fa fa-bell fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    <li>
                        <a href="department/list.action#">
                            <div>
                                <i class="fa fa-comment fa-fw"></i> 新回复
                                <span class="pull-right text-muted small">4分钟之前</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="department/list.action#">
                            <div>
                                <i class="fa fa-envelope fa-fw"></i> 新消息
                                <span class="pull-right text-muted small">4分钟之前</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="department/list.action#">
                            <div>
                                <i class="fa fa-tasks fa-fw"></i> 新任务
                                <span class="pull-right text-muted small">4分钟之前</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="department/list.action#">
                            <div>
                                <i class="fa fa-upload fa-fw"></i> 服务器重启
                                <span class="pull-right text-muted small">4分钟之前</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="department/list.action#">
                            <strong>查看所有提醒</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 消息通知 end -->
            <!-- 用户信息和系统设置 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="department/list.action#">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="department/list.action#"><i class="fa fa-user fa-fw"></i>
                        用户：</a>
                    </li>
                    <li><a href="department/list.action#"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li>
                    <li class="divider"></li>
                    <li>
                        <a href="logout.action">
                            <i class="fa fa-sign-out fa-fw"></i>退出登录
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 用户信息和系统设置结束 -->
        </ul> <!-- 左侧显示列表部分 start-->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <!-- 咨询管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse"
                     data-target="#collapseListGroup1" role="tab">
                    <h4 class="panel-title">
                        咨询管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading1">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(refer, $event)">
                                <i class="fa fa-paste fa-fw"></i> 咨询学生管理
                            </a></li>

                        <li class="list-group-item">
                            <a href="pay.html">
                                <i class="fa fa-lightbulb-o fa-fw"></i> 查询报名学生
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 学工管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse"
                     data-target="#collapseListGroup2" role="tab">
                    <h4 class="panel-title">
                        学工管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup2" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading2">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(student, $event)">
                                <i class="fa fa-suitcase fa-fw"></i> 在校学生管理
                            </a></li>
<!--                        <li class="list-group-item">-->
<!--                            <a href="student/list.action">-->
<!--                                <i class="fa fa-bell-o fa-fw"></i> 学生升班留班-->
<!--                            </a></li>-->

<!--                        <li class="list-group-item">-->
<!--                            <a href="student/list.action">-->
<!--                                <i class="fa fa-coffee fa-fw"></i> 学生流失情况-->
<!--                            </a></li>-->
                    </ul>
                </div>

                <!-- 教学管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading3" data-toggle="collapse"
                     data-target="#collapseListGroup3" role="tab">
                    <h4 class="panel-title">
                        教学管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup3" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading3">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(lessontype, $event)">
                                <i class="fa fa-comment-o fa-fw"></i> 课程管理
                            </a>
                        </li>

                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(classManage, $event)">
                                <i class="fa fa-sitemap fa-fw"></i> 班级管理
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 就业管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading4" data-toggle="collapse"
                     data-target="#collapseListGroup4" role="tab">
                    <h4 class="panel-title">
                        就业管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup4" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading4">
                    <ul class="list-group">
<!--                        job-->
                        <li class="list-group-item">
                            <a href="joinJob.html">
                                <i class="fa fa-bell-o fa-fw"></i> 学生就业管理
                            </a></li>
                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(job, $event)">
                                <i class="fa fa-cutlery fa-fw"></i> 学生就业信息
                            </a></li>
                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(jobCompany, $event)">
                                <i class="fa fa-file-text-o fa-fw"></i> 就业公司管理
                            </a></li>
                    </ul>
                </div>

                <!-- 人力资源管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading5" data-toggle="collapse"
                     data-target="#collapseListGroup5" role="tab">
                    <h4 class="panel-title">
                        人力资源管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup5" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading5">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(departmentManage, $event)">
                                <i class="fa fa-dashboard fa-fw"></i> 部门管理
                            </a>
                        </li>

                        <li class="list-group-item">
                            <a href="javascript:void(0)" @click="onclick(post, $event)">
                                <i class="fa fa-comment-o fa-fw"></i> 职务管理
                            </a>
                        </li>

                        <li class="list-group-item">

                            <a href="javascript:void(0)" @click="onclick(staff, $event)">
                                <i class="fa fa-comment-o fa-fw"></i> 员工管理
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- 左侧显示列表部分 end-->
    </nav>
    <!-- 部门列表查询部分  start-->
    <div id="page-wrapper">
        <!--        Vue:bigTitle-->
        <div class="row" id="bigTitle">
            <div class="col-lg-12">
                <h1 class="page-header">查询所有报名学生</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <!--        vue： id="queryForm"-->
        <div id="queryForm" class="panel panel-default">
            <!-- 搜索部分 -->
            <div class="panel-body">
                <div class="form-inline">
                    <div v-for="item in form" :key="item.attributeName" class="form-group" style="margin-right: 2px;">
                        <label class="col-sm-3 control-label">{{item.labelName}}</label>
                        <div class="col-sm-9">
                            <input v-if="item.type == 'text'" type="text" class="form-control"
                                   v-model="obj[item.attributeName]">

                            <select v-else-if="item.type == 'select'" class="form-control"
                                    v-model="obj[item.attributeName]">
                                <option v-for="option in item.other" :value="option.id">{{option.name}}</option>
                            </select>

                            <input v-if="item.type == 'date'" type="date" class="form-control"
                                   v-model="obj[item.attributeName]">

                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary" @click="query()">查询</button>
                </div>
            </div>
        </div>
        <a href="department/list.action#" class="btn btn-primary" data-toggle="modal" data-target="#newDialog"
           onclick="clearDept()">新建</a>
        <div class="row">
            <div class="col-lg-12">
                <!--                vm_table-->
                <div id="vm_table" class="panel panel-default">
                    <div class="panel-heading">{{tableTitle}}--共：{{pageInfo.total}}</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th v-for="col in column" :key="col[1]">{{col[0]}}</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(info,i) in pageInfo.list" :key="info.id">
                            <td v-for="col in column">{{info[col[1]]}}</td>
                            <td>
                                <!--TODO -->
                                <a @click="setEditeObj(info)" class="btn btn-primary btn-xs" href="javascript:void(0)"
                                   data-toggle="modal" data-target="#editDialog">修改</a>
                                <a @click="deleteOne(i)" class="btn btn-danger btn-xs" href="javascript:void(0)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="col-md-12 text-right">
                        <nav>
                            <ul class="pagination">
                                <li @click="getAllByCurrentPage(1)"><a href="javascript:void(0)">首页</a>
                                </li>
                                <li v-if="pageInfo.pageNum > 1"
                                    @click="getAllByCurrentPage(pageInfo.pageNum-1)"><a
                                        href="javascript:void(0)">上一页 </a></li>
                                <li v-if="pageInfo.pageNum > 1"
                                    @click="getAllByCurrentPage(pageInfo.pageNum-1)"><a href="javascript:void(0)">{{pageInfo.pageNum-1}}</a>
                                </li>
                                <li class="active"><a href="javascript:void(0)">{{pageInfo.pageNum}}</a></li>
                                <li v-if="pageInfo.pageNum + 1 <= pageInfo.pages"
                                    @click="getAllByCurrentPage(pageInfo.pageNum+1)"
                                    class="disabled"><a href="javascript:void(0)">{{pageInfo.pageNum+1}}</a></li>
                                <li v-if="pageInfo.pageNum + 1 <= pageInfo.pages"
                                    @click="getAllByCurrentPage(pageInfo.pageNum+1)">
                                    <a href="javascript:void(0)">下一页</a></li>
                                <li><a @click="getAllByCurrentPage(pageInfo.pages)" href="javascript:void(0)">尾页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- 部门列表查询部分  end-->
</div>

<!-- 创建模态框 -->
<div class="modal fade" id="newDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div id="postForm" class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">{{postFormTitle}}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="new_department_form">
                    <div v-for="item in form" :key="item.attributeName" class="form-group" style="margin-right: 2px;">
                        <label class="col-sm-3 control-label">{{item.labelName}}</label>
                        <div class="col-sm-9">
                            <input v-if="item.type == 'text'" type="text" class="form-control"
                                   v-model="obj[item.attributeName]">

                            <select v-else-if="item.type == 'select'" class="form-control"
                                    v-model="obj[item.attributeName]">
                                <option v-for="option in item.other" :value="option.id">{{option.name}}</option>
                            </select>

                            <input v-if="item.type == 'date'" type="date" class="form-control"
                                   v-model="obj[item.attributeName]">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" @click="addObj()">创建</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改模态框 -->
<div class="modal fade" id="editDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div id="editForm" class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">{{editFormTitle}}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <div v-for="item in form" :key="item.attributeName" class="form-group" style="margin-right: 2px;">
                        <label class="col-sm-3 control-label">{{item.labelName}}</label>
                        <div class="col-sm-9">
                            <input v-if="item.type == 'text'" type="text" class="form-control"
                                   v-model="obj[item.attributeName]">

                            <select v-else-if="item.type == 'select'" class="form-control"
                                    v-model="obj[item.attributeName]">
                                <option v-for="option in item.other" :value="option.id">{{option.name}}</option>
                            </select>

                            <input v-if="item.type == 'date'" type="date" class="form-control"
                                   v-model="obj[item.attributeName]">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" @click="updateObj()">保存修改</button>
            </div>
        </div>
    </div>
</div>


<!-- 引入js文件 -->
<!-- jQuery -->
<script src="./js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="./js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="./js/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="./js/sb-admin-2.js"></script>
<!-- vue.js -->
<script src="./js/vue.js"></script>
<script src="./js/vue-resource.js"></script>
<script src="./js/boot-crm.js"></script>
<!-- 编写js代码 -->
<script type="text/javascript">
    $(function () {
        $(".panel-heading").click(function (e) {
            /*切换折叠指示图标*/
            $(this).find("span").toggleClass("fa-chevron-down");
            $(this).find("span").toggleClass("fa-chevron-up");
        });
    });

    //清空新建部门窗口中的数据
    function clearDept() {
        $("#new_departmentName").val("");
    }
</script>

</body>
</html>